<template>
  <a-menu :style="menuStyle" @select="select"
          v-model:selectedKeys="selectedKeys"
          class="home-menu" :theme="theme"
          theme="dark" :mode="mode"
          :inline-collapsed="collapse"
          :items="items"/>
</template>
<script setup>
import {computed, h, reactive, shallowRef, watch} from 'vue';
import {Goods, Monitor, Search,} from '@element-plus/icons-vue';
import {useRoute, useRouter} from 'vue-router';
import store from '@/store';

defineOptions({name: 'PortalMenu'});
const collapse = computed(() => store.state.menuCollapse);
const route = useRoute();
const router = useRouter();
const mode = computed(() => store.state.globalLayout === 'normal' ? 'vertical' : 'horizontal');
const selectedKeys = shallowRef();
const theme = computed(() => store.state.theme)

const menuStyle = computed(() => {
  let width = collapse.value ? '80px' : '220px';
  if (mode.value === 'horizontal') {
    width = undefined;
  }
  return {
    height: '100%',
    width
  };
});

function select({key}) {
  router.push(key);
}

const items = reactive([
  {
    key: '/dashboard',
    icon: () => h(Monitor, {
      style: {
        width: '12px'
      }
    }),
    label: 'dashboard',
    title: 'dashboard',
  },
  {
    key: '/view1',
    icon: () => h(Search, {
      style: {
        width: '12px'
      }
    }),
    label: 'view1',
    title: 'view1',
  },
  {
    key: '/view2',
    icon: () => h(Goods, {
      style: {
        width: '12px'
      }
    }),
    label: 'view2',
    title: 'view2',
  },
]);

watch(() => route.fullPath, () => {
  selectedKeys.value = [route.path];
}, {
  immediate: true
});

</script>
<style scoped lang="scss">
.portal-menu-wrapper {
  flex: 1;
  overflow: auto;
}
</style>
<style>
.portal-menu-wrapper .el-menu {
  border-right: none;
}

.home-menu::-webkit-scrollbar {
  width: 0;
}

.home-menu {
  overflow: auto;
}
</style>